<template>
	<view @touchmove.prevent.stop>
		<u-popup v-model="showPop" mode="center" border-radius="15" width="600rpx" :mask-close-able="false">
			<view class="bind-wrap">
				<view class="bind-tip-icon">
					<image src="../static/img/chuan1.png" mode="widthFix"></image>
				</view>
				<view class="bind-tips">为了方便您查询信息，需要绑定您的手机号码</view>
				<view class="uni-tip-group-button">
					<button type="default" style="width: 180rpx;" class="uni-tip-button color-title close"
						@click="close">取消</button>
					<button type="primary" style="width: 250rpx;background-color: #007AFF;" class="uni-tip-button" open-type="getPhoneNumber"
						@getphonenumber="mobileAuthLogin">点击绑定手机号码</button>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "bind-mobile",
		data() {
			return {
				showPop: false
			};
		},
		methods: {
			open() {
				this.showPop = true
			},
			close() {
				this.showPop = false
				// uni.reLaunch({
				// 	url: this.redirectUrl
				// })
				// this.regorLoginMember('', '')
			},
			mobileAuthLogin(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					this.$emit("getPhoneNumber", e.detail)
					this.showPop = false
					// uni.navigateTo({
					// 	url: "/pages/login/reg?appid= "+ res.data.appid + "&phone=" + res.data.phone
					// })
					// setTimeout(() => {
					// 	uni.reLaunch({
					// 		url: '/pages/tabbar/tabbar-5/tabbar-5'
					// 	})
					// }, 1500)	
				} else {
					this.close()
				}
			},
			regorLoginMember(wxid, nickName) { 
				uni.navigateTo({
					url: "/pages/login/reg?wxid="+wxid+"&nickName="+nickName
				})
			}
		}
	}
</script>

<style lang="scss">
	.bind-wrap {
		width: 600rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;

		.head {
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			color: #fff;
			font-size: 24rpx;
		}

		.form-wrap {
			padding: 30rpx 40rpx;

			.label {
				color: #000;
				font-size: 28rpx;
				line-height: 1.3;
			}

			.form-item {
				margin: 20rpx 0;
				display: flex;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #eee;
				align-items: center;

				input {
					font-size: 24rpx;
					flex: 1;
				}

				.send {
					font-size: 24rpx;
					line-height: 1;
				}

				.captcha {
					margin: 4rpx;
					height: 52rpx;
					width: 140rpx;
				}
			}
		}

		.footer {
			border-top: 1px solid #eee;
			display: flex;

			view {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;

				&:first-child {
					font-size: 28rpx;
					border-right: 1px solid #eee;
				}
			}
		}

		.bind-tips {
			color: #aaa;
			font-size: 28rpx;
			padding: 20rpx 50rpx;
			text-align: center;
		}

		.auth-login {
			width: 300rpx;
			margin: 20rpx auto 60rpx auto;
		}

		.bind-tip-icon {
			padding-top: 80rpx;
			width: 100%;
			text-align: center;

			image {
				width: 300rpx;
			}
		}
	}

	.ns-btn-default-all {
		width: 100%;
		height: 70rpx;
		border-radius: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.uni-tip-group-button {
		margin-top: 30rpx;
		line-height: 120rpx;
		display: flex;
		padding: 0 50rpx 50rpx 50rpx;
		justify-content: space-between;
	}

	.uni-tip-button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border: none;
		border-radius: 80rpx;
		padding: 0 !important;
		margin: 0 !important;
		background: #fff;
		font-size: 28rpx;
	}

	.uni-tip-group-button .close {
		border: 1px solid #eee;
	}

	.uni-tip-button:after {
		border: none;
	}
</style>
